<template>
  <div class="page">
    <m-header class="nm-titl" :title="proData &&proData.home_bottom_nav[4].name ||'我的'"></m-header>
    <section class="body index-bg">
      <div class="info">
        <img
          class="img"
          :src="proData &&api+proData.user_photo"
          alt
        />
        <div class="info-data">
          <p class="item">
            <span>{{info?info.username:'游客用戶'}}</span>
            <i class="mark">{{info?info.levelname:'-'}}</i>
          </p>
          <p class="item">
            <i>ID/手机：{{info?info.mobile:'-'}}</i>
          </p>
        </div>
        <!-- <div class="count-card">
          <div class="card-name">{{speedCard.text}}</div>
          <div class="count">剩余：<span class="num">{{speedCard.money}}</span>张</div>
        </div> -->
      </div>
      <ul class="record">
        <li
          class="item"
          v-for="(item,index) in recordList"
          :key="index"
          @click="goTo(item.route)"
        >
          <img
            class="img"
            :src="item.src"
            alt
          />
          <img class="tag" :src="item.tag">
          <!--<p class="name">{{item.name}}</p>-->
        </li>
      </ul>
      <ul class="capital">
        <li
          class="item"
          :class="index>2?'small':''"
          v-for="(item,index) in capitalList"
          :key="index"
          @click="goTo(item.route,item.type)"
        >
          <p class="num">{{item.num}}</p>
          <p class="name">{{item.name}}</p>
        </li>
      </ul>
      <ul class="menu">
        <li
          class="item"
          v-for="(item,index) in menuList"
          :key="index"
          @click="goTo(item.route)"
        >
          <!--<img-->
          <!--class="img"-->
          <!--:src="item.src"-->
          <!--alt-->
          <!--/>-->
          <!--<p class="name">{{item.name}}</p>-->
          <img class="tag" :src="item.tag" alt="">
        </li>
      </ul>
    </section>
    <m-model
      ref="article"
      :content="newArticle.contents"
      :isHtml='true'
      confirmColor='#fff'
      :showCancel='false'
      confirmText='关闭'
    ></m-model>
    <m-Footer></m-Footer>
  </div>
</template>
<script>
  import { mapGetters, mapMutations } from 'vuex';
  import { Base, Owner, Init, Index } from '@/server/server.js';
  import { Secret } from '@/assets/commonjs/utils.js';
  import mModel from '@/components/model'
  import titUrl from '../../assets/images/new/tit5.png'

  export default {
    name: 'my',
    data() {
      return {
        titUrl,
        info: {
          levelname: null,
          mobile: null,
          username: null,
        },
        speedCard: {
          text: '加速卡',
          money: 0
        },
        capitalList: [
          {
            num: "0.00",
            name: '--',
            route: 'BlockMine',
            type: 'credit2'
          },
          {
            num: "0.00",
            name: '--',
            route: 'BlockMine',
            type: 'credit4'
          },
          {
            num: "0.00",
            name: '--',
            route: 'MiningMachine',
            type: 'credit1'
          },
          {
            num: "0.00",
            name: '--',
            route: 'BlockMine',
            type: 'speed_card'
          },
          {
            num: "0.00",
            name: '总资产',
            type: 'total'
          },
          {
            num: "0.00",
            name: '--',
            route: 'MiningMachine',
            type: 'credit3'
          },
          {
            num: "0.00",
            name: '景点收益',
            route:'ProfitDetail'
          }
        ],
        recordList: [
          {
            src: require('@/assets/images/gzlz/Icon_reservation.png'),
            name: '预约记录',
            route: 'Bestpeak',
            tag: require('@/assets/images/new/tag1.png')
          },
          {
            src: require('@/assets/images/gzlz/Icon_loot.png'),
            name: '匹配记录',
            route: 'Mine',
            tag: require('@/assets/images/new/tag2.png')
          },
          {
            src: require('@/assets/images/gzlz/Icon_assignment.png'),
            name: '转让记录',
            route: 'Attorn',
            tag: require('@/assets/images/new/tag3.png')
          }
        ],
        menuList: [
          {
            src: require('@/assets/images/gzlz/Icon_recommended.png'),
            name: '邀请好友',
            route: 'Invite',
            tag: require('@/assets/images/new/5-1.png')
          },
          {
            src: require('@/assets/images/gzlz/Icon_realname.png'),
            name: '实名验证',
            route: 'Certify',
            tag: require('@/assets/images/new/5-2.png')
          },
          {
            src: require('@/assets/images/gzlz/Icon_payment.png'),
            name: '支付信息',
            route: 'PayInfo',
            tag: require('@/assets/images/new/5-3.png')
          },
          {
            src: require('@/assets/images/gzlz/Icon_team.png'),
            name: '我的团队',
            route: 'Team',
            tag: require('@/assets/images/new/5-4.png')
          },
          {
            src: require('@/assets/images/gzlz/Icon_turntable.png'),
            name: '系统消息',
            route: 'msg',
            tag: require('@/assets/images/new/5-5.png')
          },
          {
            src: require('@/assets/images/gzlz/Icon_settings.png'),
            name: '其它设置',
            route: 'Set',
            tag: require('@/assets/images/new/5-6.png')
          },
        ],
        newArticle: {
          title: '',
          contents: ''
        },
      }
    },
    mounted() {
      (async () => {
        if (!this.coinTxt)
          await this.getText();
        this.initData();
      })()
      this.getUser(this.uid);
      this.getCoin();
      this.getNewArticle()
      if (!this.userInfo)
        window.location.reload();
    },
    computed: {
      ...mapGetters(['api', 'uid', 'userInfo', 'coinTxt', 'proData'])
    },
    components: {
      mModel
    },
    methods: {
      ...mapMutations(['saveCoinTxt', 'saveUserInfo']),
      getNewArticle() {
        Index.getNewArticle().then(res => {
          if (res.code === 1) {
            res.data.contents = res.data.contents.replace(/\<img/gi, '<img style="max-width:100%;height:auto";display:block;')
            this.newArticle = res.data
          }
        })
      },
      initData() {
        let _this = this;
        this.capitalList.forEach(element => {
          element.name = _this.coinTxt[element.type + '_text'] && _this.coinTxt[element.type + '_text'] || element.name;
        });
      },
      /**
       * 获取币中名称与按钮
       */
      async getText() {
        await Base.getText().then(res => {
          if (res.code == 1) {
            this.saveCoinTxt(res.data);
            localStorage.setItem('coinTxt', JSON.stringify(res.data));
            this.initData();
          }
        })
      },
      goTo(route, type) {
        if (route === 'msg') {
          this.$refs.article.open()
        } else {
          this.$router.push({ name: route, query: { type } })
        }
      },
      /**
       * 资产/ 币种余额
       */
      getCoin() {
        Owner.getUserCoin({ id: this.uid }).then((res) => {
          if (res.code == 1) {
            this.assignData(this.capitalList, res.data.data)
            this.speedCard = res.data.data.speed_card
          } else {
            mui.toast(res.msg);
            return;
          }
        })
      },
      /**
       * 处理返回的數据
       */
      assignData(lastData, data) {
        console.log(data);
        lastData[0].num = data.credit2.money;
        lastData[1].num = data.credit4.money;
        lastData[2].num = data.credit1.money;
        lastData[3].num = data.speed_card.money;
        lastData[4].num = data.total.money;
        lastData[5].num = data.credit3.money;
        lastData[6].num = data.jdlj_profit;
      },
      /**
       * 获取用户信息
       */
      getUser(id) {
        Init.getUser({ id }).then(res => {
          if (res.code == 1) {
            // this.info = res.data[0];
            this.info = JSON.parse(Secret.decrypt(res.data))[0];
            if (this.info) {
              localStorage.setItem('userInfo', Secret.encrypt(JSON.stringify(this.info)));
              this.saveUserInfo(this.info)
            }
          } else {
            mui.toast(res.msg);
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "~link-less";
  .page {
    // background-image: url("../../assets/images/bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .nm-titl {
    padding: 20px 0 30px;
  }

  .body {
    padding: @padding-primary;
    // background-color: @bg-color;

    .info {
      .display-flex();
      flex-direction: row;
      .img {
        height: 110px;
        min-width: 80px;
        max-width: 110px;
        margin: 0 10px;
      }
      .info-data {
        .display-flex();
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
        .item {
          color: white;
          font-size: 32px;
          > i {
            font-size: 20px;
            vertical-align: middle;
            &.mark {
              background-color: @primary-color;
              padding: 5px 25px;
              margin-left: 40px;
              border-radius: 8px;
            }
          }
        }
      }
      .count-card {
        flex: 1;
        color: #ffffff;
        background-color: @bg-card-color-blue;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .num {
          color: #fffc00;
          margin-right: 5px;
        }
        .card-name {
          padding: 0 10px;
          border-radius: 8px;
        }
        .count {
          margin-top: 10px;
        }
      }
    }
    // 记录
    .record {
      .display-flex();
      justify-content: space-between;
      margin-top: @l-margin;
      .item {
        width: 215px;
        height: 215px;
        padding: 20px 0;
        text-align: center;
        border-radius: 10px;
        background: url("../../assets/images/new/slogon.png") no-repeat;
        background-size: 100%;
        .img {
          height: 100px;
        }
        .tag {
          height: 36px;
          margin-top: 10px;
        }
        .name {
          font-size: 28px;
        }
      }
    }
    // 资产
    .capital {
      margin-top: @margin-primary;
      padding: 40px 0;
      text-align: center;
      width: 700px;
      height: 340px;
      background: url("../../assets/images/new/5-bg1.png") no-repeat;
      background-size: 100%;
      
      .item {
        width: 33%;
        display: inline-block;
        padding: 20px 0;
        &.small {
          width: 25%;
        }
        > p {
          text-align: center;
          font-size: 32px;
          // color: @primary-color;
          color: #CD0C0C;
          &.name {
            font-size: 24px;
            color: #333;
          }
        }
      }
    }
    .menu {
      margin-top: @margin-primary;
      padding: 10px 0;
      border-radius: 10px;
      .item {
        width: 50%;
        text-align: center;
        padding: 20px 0;
        display: inline-block;
        .img {
          height: 100px;
        }
        .name {
          font-size: 28px;
        }
        .tag {
          height: 60px;
        }
      }
    }
  }
</style>
